<template>
    <div class="app-container">
        <div class="customContainer oneSearchNoFooter">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-select filterable placeholder="选择品牌" v-model="formInline.brand_id"
                        @change="brandChange">
                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item class="pull-right">
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px">
                            同一品牌下配置的门店可以互通使用会员卡、次季年卡、星星卡（相应使用记录也可互通查询）
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item class="pull-right">
                    <el-button type="primary" @click="deployStoreClick">配置门店</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label='一卡通门店' prop="store_name"></el-table-column>
                <el-table-column align="center" label='操作'>
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" size="mini"
                            @click="delClick(scope.row.store_id,scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 配置门店弹框 -->
            <el-dialog :close-on-click-modal="false" width="650px" title="选择门店" :visible.sync="storeDialog"
                @close="callOf()">
                <div>
                    <div class="el-transfer-panel pull-left transferHeader">选择门店</div>
                    <div class="el-transfer-panel pull-right transferHeader">已选门店</div>
                </div>
                <el-transfer :props="{key: 'id', label: 'name'}" :titles="['全选', '全选']" :button-texts="['删除', '添加']"
                    filterable v-model="check_store_list" :data="storeList" ref="transfer">
                </el-transfer>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" type="primary" @click="saveStoreClick">确 定</el-button>
                </span>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    import {
        getList,
        get_check_store_list,
        delPackage,
        getStoreList,
        getBrandList,
        saveStore,
    } from "@/api/member/oneCardSolution";
    export default {
        data() {
            return {
                old_list: '',
                storeDialog: false,
                list: null,
                listLoading: false,
                storeList: [],
                brandList: null,
                check_store_list: [],
                formInline: {
                    brand_id: '2',
                },
                saveStore: {
                    brand_id: '',
                    store_list: []
                },

            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.brandList) {
                    vm.getBrand();
                }
            })
        },
        methods: {
            deployStoreClick() {
                this.storeDialog = true;
                setTimeout(() => {
                    this.$refs.transfer.clearQuery('left');
                    this.$refs.transfer.clearQuery('right');
                }, 0);
            },
            saveStoreClick() {
                if (this.old_list == JSON.stringify(this.check_store_list)) {
                    this.$message({ type: 'error', message: '配置门店未修改' });
                    return;
                }
                this.saveStore.store_list = this.check_store_list;
                this.saveStore.brand_id = this.formInline.brand_id;
                saveStore(this.saveStore).then(response => {
                    this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                    this.storeDialog = false;
                });
            },
            getBrand() {
                getBrandList({ org: 1, category_id: this.$route.meta.id }).then(response => {
                    this.brandList = response;
                    this.brandChange();
                });
            },
            brandChange() {
                this.getStore();
                this.fetchData();
            },
            getStore() {
                getStoreList({ brand: this.formInline.brand_id, category_id: this.$route.meta.id }).then(response => {
                    this.storeList = response;
                });
            },
            delClick(id, index) {
                this.$confirm('删除门店后，该门店将不支持一卡通互通，是否继续', '提示', { type: 'warning' }).then(() => {
                    delPackage({ brand_id: this.formInline.brand_id, store_id: id }).then(response => {
                        this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                        if (response.code == 1) {
                            this.list.splice(index, 1);
                        }
                    });
                })
            },
            callOf() {
                this.fetchData();
            },
            searchClick() {
                this.fetchData();
                this.getStore();
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.check_store_list = [];
                getList(this.formInline).then(response => {
                    this.list = response;
                    response.forEach((val, i) => {
                        this.check_store_list.push(val.store_id)
                    });
                    this.old_list = JSON.stringify(this.check_store_list)
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                });
            },
        }
    };
</script>